<template>
  <div>
    <mi-hedaer />
    <mi-content :banner-list="bannerList" :icons-list="iconsList" :news-one="news1" :goods="goods" :news-two="newTwo" :news-three="newsThree" />
    <mi-footer />
  </div>
</template>

<script>
import miContent from "./mi-content";
import miHedaer from "./mi-header";
import miFooter from "./mi-footer";
export default {
  components: {
    miHedaer,
    miContent,
    miFooter
  },
  data() {
    return {
      data: {},
      bannerList: [],
      iconsList: [],
      news1: [],
      goods: [],
      newTwo: [],
      newsThree: []
    }
  },
  mounted() {
    this.axios({
      url: '/api/index.json'
    }).then((res) => {
      this.data = res
      this.bannerList = this.getData(0)
      this.iconsList = [...this.getData(1), ...this.getData(2)]
      this.news1 = this.getData(4)[0]
      this.goods = this.getData(6)
      this.newTwo = this.getData(8)[0]
      this.newsThree = this.getData(10)[0]
    })
  },
  methods: {
    getData(index) {
      const data = this.data.data.data.data;
      return data.sections[index].body.items;
    }
  }
};
</script>
